<template>
  <div id="record-page">
    <c-title text="随叫随到"></c-title>
    <div class="top-member">
      <img :src="detailData.member ? detailData.member.avatar_image : ''" alt="">
      <span class="nickname">{{detailData.member ? detailData.member.username : ""}}</span>
    </div>
    <div class="total-bonus">
      <span class="bonus-sty">奖金总额:</span>
      <span class="price-sty">￥{{detailData.total_income_amount}}</span>
    </div>
    <van-tabs v-model="reward_type" line-width="100px" @click="clickTab">
      <van-tab :title="item.name" :name="item.id" v-for="(item,index) in tabList" :key="index">
        <d-list :loading="loading" :finished="finished" @load="onLoad">
          <div :class="recordList.length !== index + 1 ? 'record-pane record-border' : 'record-pane'" v-for="(item,index) in recordList" :key="index">
            <div class="top-sn">
              <span class="sn-sty">{{item.order_sn}}</span>
              <span class="sn-price">￥{{item.dividend_amount}}</span>
            </div>
            <div class="date">{{item.created_at}}</div>
          </div>
        </d-list>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import index_controller from "./index_controller";

export default index_controller;
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
#record-page {
  .top-member {
    display: flex;
    align-items: center;
    background: #fb6b68;
    padding: 1.2rem 0.75rem;

    img {
      width: 2.75rem;
      height: 2.75rem;
      border-radius: 50%;
      margin: 0;
    }

    .nickname {
      font-size: 0.8rem;
      font-weight: bold;
      color: #fff;
      margin-left: 0.3rem;
    }
  }

  .total-bonus {
    padding: 0.6rem 0.75rem;
    background: white;
    display: flex;
    align-items: center;
    margin-bottom: 0.6rem;

    .bonus-sty {
      font-size: 0.85rem;
      font-weight: 400;
      color: #333;
    }

    .price-sty {
      font-size: 0.85rem;
      font-weight: 400;
      color: #fb6b68;
      margin-left: 0.4rem;
    }
  }

  .record-border {
    border-bottom: 0.025rem solid #e7e7e7;
  }

  .record-pane {
    padding: 0.8rem 0.75rem;
    background: white;

    .top-sn {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 0.4rem;

      .sn-sty {
        font-size: 0.8rem;
        font-weight: bold;
        color: #333;
      }

      .sn-price {
        font-size: 0.8rem;
        font-weight: bold;
        color: #fb6b68;
      }
    }

    .date {
      text-align: left;
      font-size: 0.65rem;
      font-weight: 400;
      color: #999;
    }
  }
}
</style>
